<script lang="ts" setup>
import { h, ref, reactive, watch, computed } from 'vue'
import { aesEncrypt, createRef, refs } from 'dsrz/utils'


// 定义 props
const props = defineProps<{
  visible: boolean,
  dialogTitle?: string,
}>()

// 定义 emits
const emit = defineEmits<{
  close: []
  confirm: [data: any]
}>()

const optionList = reactive([
    { label: '王老师', value: 1, id: 1, nickname: '王老师', disabled: false },
    { label: '张老师', value: 2, id: 2, nickname: '张老师', disabled: true },
    { label: '王老师1', value: 3, id: 3, nickname: '王老师1', disabled: true },
    { label: '王老师2', value: 4, id: 4, nickname: '王老师2', disabled: false },
    { label: '王老师3', value: 5, id: 5, nickname: '王老师3', disabled: false },
])


// 先定义 details，使用空对象 as any 来避免类型检查
const formDetails = reactive({} as any)

const editor = (value: any) => {
    console.log('== 班级职务 ', value)
    // 清空旧数据
    Object.keys(formDetails).forEach(key => delete formDetails[key])
    // 批量赋值新数据
    if (value) {
        Object.keys(value).forEach(key => {
            formDetails[key] = value[key]
        })
    }
}

const form = reactive({
  size: 'default',
  details: formDetails,
  items: [
   
    {
      label: '班长',
      prop: 'monitorId',
      is: 'currency-select',
      bind: {
        clearable: true,
        placeholder: '请选择班长',
        options: optionList,
      },
    },
    {
      label: '副班长',
      prop: 'deputyId',
      is: 'currency-select',
      bind: {
        clearable: true,
        placeholder: '请选择副班长',
        options: optionList,
      },
    },
    {
      label: '团支书',
      prop: 'secretaryId',
      is: 'currency-select',
      bind: {
        clearable: true,
        placeholder: '请选择团支书',
        options: optionList,
      },
    },
    {
      label: '心理委员',
      prop: 'psychologicalId',
      is: 'currency-select',
      bind: {
        clearable: true,
        placeholder: '请选择心理委员',
        options: optionList,
      },
    },
  ],
  rules: {
    monitorId: [{ required: true, message: '请选择班长', trigger: 'blur' }],
    deputyId: [{ required: true, message: '请选择副班长', trigger: 'blur' }],
    secretaryId: [{ required: true, message: '请选择团支书', trigger: 'blur' }],
    psychologicalId: [{ required: true, message: '请选择心理委员', trigger: 'blur' }],
  },
})


const handleConfirm = async () => {
  // 通过全局 refs 访问表单实例
  const formInstance = refs.formRef

  console.log('获取 班级职位 form 表单 ', form.details)
  
  if (formInstance) {
    try {
      // 触发表单验证
      await formInstance.validate()
      // 验证通过，执行确认逻辑
      emit('confirm', form.details)
      emit('close') // 通知父组件关闭弹出框
    } catch (error) {
      // 验证失败
      console.log('表单验证失败', error)
      return false // 阻止对话框关闭
    }
  } else {
    console.log('表单实例未找到')
    return false
  }
}

// 重置表单逻辑
const resetForm = () => {
    // 清空表单数据，保持响应式引用
    Object.keys(formDetails).forEach(key => delete formDetails[key])
    
    // 重置表单验证状态
    const formInstance = refs.formRef
    if (formInstance) {
        formInstance.resetFields()
    }
    
    console.log('重置表单')
}

const cancel = () => {
    resetForm()
    emit('close') // 通知父组件关闭弹出框
}



defineExpose({
  editor,
})
</script>

<template>
    <CurrencyDialog
      v-model="props.visible"
      title="班级职务"
      :size="form.size"
      @cancel="cancel"
      @confirm="handleConfirm"
      >
      <CurrencyForm
        ref="formRef"
        v-model="form.details"
        :items="form.items"
        :rules="form.rules"
        label-position="top"
      />
    </CurrencyDialog>
</template>